<template>
  <div class="panel">
    <div class="tools">
      <img src="../../assets/images/left.png" class='left' alt="">
      <img src="../../assets/images/left_down.png" class='left-down' alt="">
      <img src="../../assets/images/right.png" class='right' alt="">
      <img src="../../assets/images/right_down.png" class='right-down' alt="">
      <div class="warp">
        区域：
        <el-select v-model="value" placeholder="请选择" class="toolsinput">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择" color="red" class="toolsinput">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        时间：
        <el-date-picker
          v-model="value"
          align="right"
          placeholder="选择日期时间" class="pickers">
          <i slot="suffix" class="el-input__icon el-icon-date"></i>
        </el-date-picker>
        <div class="btn-warp">
          <div class="search-btn" @click="search">查询
            <img src="../../assets/images/left.png" class='left'style="width: 8px;"  alt="">
            <img src="../../assets/images/left_down.png" class='left-down'style="width: 8px;"  alt="">
            <img src="../../assets/images/right.png" class='right'style="width: 8px;"  alt="">
            <img src="../../assets/images/right_down.png" class='right-down' style="width: 8px;" alt="">
          </div>
          <div class="search-btn">清除</div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <div class="maps">
          <v-map style="height: 100%"></v-map>
          <div class='left'>
            <img src="../../assets/images/left.png" alt="">
          </div>
          <div class='left-down'>
            <img src="../../assets/images/left_down.png" alt="">
          </div>
          <div class='right'>
            <img src="../../assets/images/right.png" alt="">
          </div>
          <div class='right-down'>
            <img src="../../assets/images/right_down.png" alt="">
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <summery></summery>
      </el-col>
    </el-row>
    <c-alert style="margin-top: 15px"></c-alert>
    <el-row>
      <el-col :span="12">
        <expressinfo style="margin-right:10px" title="物流需求申请信息"></expressinfo>
      </el-col>
      <el-col :span="12">
        <expressinfo style="margin-left:10px" title="物流运输任务执行信息"></expressinfo>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/javascript">
  import maps from './map.vue'
  import summery from './summery.vue'
  import cAlert from './alert.vue'
  import expressinfo from './expressinfo.vue'

  export default {
    data() {
      return {
        tmsApplyslist: [],
        options1: [{
          value: '河北',
          label: '河北'
        }],
        options2: [{
          value: '廊坊',
          label: '廊坊'
        }],
        value: ''
      }
    },
    mounted() {
    },
    methods: {
      search() {
      },
      //所有任务单
      tmsTasks() {
        this.$fetch({
          base: 'one',
          method: 'get',
          must: true,
          url: '/v1/bdTaskMg/tmsTasks',
        }).then((res) => {
          console.log(res);
        })
      },
      //所有申请单
      tmsApplys() {
        this.$fetch({
          base: 'one',
          method: 'get',
          must: true,
          url: '/v1/bdApplyMg/tmsApplys',
        }).then((res) => {
          this.tmsApplyslist = res.data.data
          console.log(this.tmsApplyslist);
        })
      },

    },
    components: {
      vMap: maps,
      summery:
      summery,
      cAlert,
      expressinfo
    }
  }
</script>
